<template name="BmiEChartWeight">
  <div>
    <div id="chartsWeight" class="echart-size" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'BmiEChartWeight',
  props: {
    monthBaseValues: {
      type: Array,
      default () {
        return []
      }
    },

    beginIndex: {
      type: Number,
      default () {
        return 0
      }
    },

    endIndex: {
      type: Number,
      default () {
        return 0
      }
    },

    lineValues: {
      type: Array,
      default () {
        return []
      }
    },

    lineNames: {
      type: Array,
      default () {
        return []
      }
    },

    actualMonth: {
      type: Array,
      default () {
        return []
      }
    },

    weight: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      option: {}
    }
  },

  mounted () {
    this.initData()
  },

  methods: {
    initData () {
      const myChart = echarts.init(document.getElementById('chartsWeight'))
      var max = 0
      var min = 0
      min = this.$props.lineValues[0][this.$props.beginIndex]
      var seriesArrayWeight = []
      for (var index in this.$props.lineNames) {
        var series = {
          name: '',
          type: 'line',
          data: [],
          markPoint: {}
        }
        series.name = this.$props.lineNames[index]
        for (var value = this.$props.beginIndex; value < this.$props.endIndex + 1; value++) {
          var item = [this.$props.monthBaseValues[value], this.$props.lineValues[index][value]]
          series.data.push(item)
          if (this.$props.lineValues[index][value] > max) {
            max = this.$props.lineValues[index][value]
          }
        }
        seriesArrayWeight[index] = series

        if (index === '0') {
          if (this.$props.actualMonth.length === 1) {
            var point = {
              symbolSize: 40, // 标记大小
              data: [{
                xAxis: this.$props.actualMonth[0],
                yAxis: this.$props.weight[0]
              }]
            }
            series.markPoint = point
          }
        }
      }

      if (this.$props.actualMonth.length > 1) {
        var barSeries = {
          name: '体重',
          type: 'bar',
          data: [],
          label: {
            show: true,
            rotate: 90,
            fontSize: 8
          }
        }
        var month0 = this.$props.actualMonth[0]
        var month1 = this.$props.actualMonth[1]
        if (month0 === month1) {
          month1 = month0 + 1
        }
        var item1 = [month0, this.$props.weight[0]]
        var item2 = [month1, this.$props.weight[1]]
        barSeries.data.push(item1)
        barSeries.data.push(item2)

        seriesArrayWeight[this.$props.lineNames.length] = barSeries
      }

      max = 36
      min = 3
      // if (this.$props.weight > max){
      // 	max = this.$props.weight+5;
      // }
      // if (this.$props.weight < min){
      // 	min = this.$props.weight-5;
      // }
      max = Math.ceil(max)
      min = Math.floor(min)
      var weightOption = {
        title: {
          text: '体重曲线',
          textStyle: {
            fontSize: 14,
            color: '#50576a'
          },
          left: 'center',
          top: 0
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          top: 20,
          data: this.$props.lineNames
        },
        grid: {
          top: 70,
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitNumber: 10,
          boundaryGap: false,
          data: this.$props.monthBaseValues.slice(this.$props.beginIndex, this.$props.endIndex),
          min: this.$props.monthBaseValues[this.$props.beginIndex],
          max: this.$props.monthBaseValues[this.$props.endIndex],
          interval: 3,
          axisLabel: {
            formatter: '{value}月',
            rotate: 45,
            fontSize: 10
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 10,
          axisLabel: {
            formatter: '{value}kg',
            fontSize: 10
          },
          min: min,
          max: max
        },
        series: seriesArrayWeight
      }
      myChart.setOption(weightOption)
    }
  }
}
</script>

<style lang="scss">
	.echarts-view {
		width: 100%;
		height: 25rem;
		display: block;
	}

  .echart-size {
    width: 100%;
    height: 400px;
  }
</style>
